/*
 * Name:	jd.css
 * Since:	Thu Jul 12 22:14:18 HKT 2018
 * Website:	https://github.com/AuqaJerry/itmsw
 * Author:	AquaJerry <huopopo_zeyang@163.com>
 *
 * This is a BEM-style stylesheet for Jingdong/Joybuy pages.
 * */

/* Base Style */

html,
body {
	margin: 0;
	padding: 0;
}

/*
 * Block:	page
 * */

.page {
	width: 100%;
}

/*
 * Block:	header
 * Elements:
 *			content
 *			title-bar
 *			logo
 *			title
 *			menu
 *			link
 * */

.header {
	width: 100%;
}

.header--register {
	background: linear-gradient(#fff 92%, #ddd, #fff);
}

/*
 * font:	no gaps among words && fake flexbox
 * margin:	center
 * */
.header__content {
	font: 0 MicrosoftYahei, serif;
	margin: 0 auto;
}

/* fake flexbox */
.header__content--flex {
	text-align: justify;
	text-align-last: justify;
}

.header__content--flex::after {
	content: '';
	display: inline-block;
	width: 100%;
}

.header__content--login {
	width: 990px;
}

.header__content--register {
	width: 1200px;
}

.header__title-bar,
.header__logo,
.header__title,
.header__menu {
	display: inline-block;
	vertical-align: middle;
}

.header__logo--login {
	margin: 10px 0;
}

.header__logo--register {
	margin: 30px 0;
}

.header__title {
	color: #363636;
	font-size: 26px;
}

.header__title--login {
	margin: 0 20px;
}

.header__title--register {
	margin: 0 40px;
}

.header__menu {
	color: #767676;
	font-size: 16px;
}

.header__link {
	color: red;
	text-decoration: none;
}

.header__link:hover {
	text-decoration: underline;
}

/*
 * Block:	main
 * Elements:
 *			content
 *			wrap
 *			photo
 *			form-box
 *			menu-bar
 *			icon
 *			link
 *			spearator
 * */

.main {
	width: 100%;
}

.main--login {
	background: #2aa8f3;
}

/*
 * font:	no gaps among words && fake flexbox
 * margin:	center
 * */
.main__content {
	font: 0/1.5 MicrosoftYahei, serif;
	margin: 0 auto;
}

.main__content--login,
.main__form-box--login {
	width: 990px;
}

.main__content--register {
	padding: 60px 0;
	width: 1200px;
}

.main__wrap {
	overflow: hidden;
}

.main__wrap--login {
	white-space: nowrap;
}

.main__photo,
.main__icon,
.main__link,
.main__form-box--login {
	display: inline-block;
	vertical-align: middle;
}

.main__form-box--login {
	position: relative;
	right: 990px;
	text-align: right;
}

.main__form-box--register {
	border-right: 1px solid #ccc;
	display: inline-block;
	padding: 0 137px;
}

.main__menu-bar {
	display: inline-block;
	list-style: none;
	vertical-align: top;
}

.main__menu-bar--register {
	padding-left: 100px;
}

.main__link--register {
	color: #767676;
	font-size: 14px;
	margin: 0 13px;
	text-decoration: none;
}

.main__link--register:hover {
	color: #363636;
	text-decoration: underline;
}

.main__separator {
	border-top: 1px solid #ccc;
	margin: 20px 0;
}

/*
 * Block:	form
 * Elements:
 * 		list
 * 		sublist
 * 		title-bar
 * 		title
 * 		cell
 * 		icon
 * 		label
 * 		input-box
 * 		input
 * 		tip
 * 		button
 * 		textarea
 * 		text
 * 		submit-box
 * 		submit
 * 		footer
 * 		link
 * 		link-body
 * */

.form {
	font: 0/1.5 MicrosoftYahei, serif;
}

/* csslint: shared font sizes */

.form__title--login-tip,
.form__title--term,
.form__label--register,
.form__tip--register,
.form__text,
.form__link {
	font-size: 14px;
}

.form__title--login {
	font-size: 18px;
}

.form--login,
.form--term {
	background: #fff;
}

.form--dialog {
	border: 4px solid #c3c3c3;
	left: 50%;
	position: fixed;
	top: 50%;
}

.form--hidden {
	display: none;
}

.form--login {
	display: inline-block;
}

.form--term {
	border-radius: 5px;
	height: 596px;
	margin: -302px 0 0 -477px;
	width: 947px;
	z-index: 1001;
}

.form__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.form__list--register {
	margin: 0 auto;
}

.form__sublist {
	display: inline-block;
	vertical-align: top;
	width: 50%;
}

/* fake flexbox */
.form__title-bar--term,
.form__label {
	text-align: justify;
	text-align-last: justify;
}

.form__title-bar--term::after,
.form__label::after {
	content: '';
	display: inline-block;
	width: 100%;
}

.form__title-bar--login {
	border-bottom: 1px solid #ccc;
	color: #e4393c;
	margin: 0 0 33px;
	text-align: center;
}

.form__title-bar--term {
	background: #f3f3f3;
	padding: 5px 10px;
}

.form__title,
.form__icon,
.form__label,
.form__input-box,
.form__tip,
.form__button {
	display: inline-block;
	vertical-align: middle;
}

.form__title--login,
.form__title--login-tip {
	line-height: 3em;
	margin: 0 5px;
}

.form__title--login-tip {
	visibility: hidden;
}

.form__title--term {
	font-weight: 700;
}

.form__cell--login,
.form__cell--register {
	border: 1px solid #ccc;
}

.form__cell--register,
.form__cell--tip {
	margin: 0 0 10px;
}

.form__cell--login {
	margin: 20px;
	overflow: hidden;
	text-align: left;
}

.form__cell--register {
	color: #767676;
}

.form__icon--in-title-bar {
	cursor: pointer;
}

.form__icon--left {
	border-right: 1px solid #ccc;
}

.form__icon--right {
	margin: 16px;
	visibility: hidden;
}

.form__icon--tip-left {
	height: 16px;
	margin: 0 10px 0 0;
}

/*
 * word-spacing:	remove whitespace, about -0.25em
 * */
.form__label--register {
	height: 48px;
	line-height: 48px;
	margin: 0 20px;
	width: 5em;
	word-spacing: -4px;
}

.form__input {
	border: none;
	padding: 10px;
}

.form__input--login {
	height: 18px;
	width: 245px;
}

.form__input--register {
	height: 28px;
	width: 246px;
}

.form__input--code {
	height: 28px;
	width: 152px;
}

.form__tip--register {
	color: #ff8801;
	line-height: 1;
}

.form__button {
	background: #e5e5e5;
	border: none;
}

.form__button--register {
	height: 42px;
	width: 120px;
}

.form__textarea {
	font: 0/1.5 simsun, serif;
	overflow-y: auto;
	padding: 10px;
}

.form__textarea--term {
	height: 426px;
	margin: 10px;
}

.form__text--policy,
.form__text--term {
	color: #666;
}

.form__text--link,
.form__text--term {
	font-weight: 700;
	text-decoration: underline;
}

.form__text--link {
	color: #f00;
}

.form__submit-box--login {
	margin: 58px 20px 30px;
}

.form__submit-box--term {
	margin: 25px 0;
	text-align: center;
}

.form__submit {
	border: none;
	cursor: pointer;
	font-size: 16px;
}

.form__submit--agree,
.form__submit--cancel {
	height: 54px;
	margin: 0 15px;
	width: 200px;
}

.form__submit--agree,
.form__submit--login,
.form__submit--register {
	background: #f0282c;
	color: #fff;
}

.form__submit--login,
.form__submit--register {
	width: 100%;
}

.form__submit--cancel {
	background: #e3e4e5;
	color: #999;
	padding: 0;
}

.form__submit--login {
	height: 33px;
}

.form__submit--register {
	height: 50px;
}

.form__footer {
	border-top: 1px solid #ccc;
	overflow: hidden;
	text-align: right;
}

.form__link,
.form__link-body {
	display: inline;
	vertical-align: middle;
}

.form__link {
	color: #b61d1d;
	text-decoration: none;
}

.form__link--code {
	margin: 0 10px;
}

.form__link--login {
	margin: 0 20px;
}

.form__link:hover {
	text-decoration: underline;
}

.form__link-body {
	line-height: 50px;
}

/*
 * Block:	footer
 * Elements:
 *			content
 *			menu-bar
 *			menu
 *			link
 *			copyright
 * */

.footer {
	width: 100%;
}

/*
 * margin:		center
 * overflow:	auto height
 * */
.footer__content {
	color: gray;
	font: 12px/1.5 MicrosoftYahei, serif;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
}

.footer__content--login {
	width: 990px;
}

.footer__content--register {
	border-top: 1px solid #ccc;
	width: 1200px;
}

.footer__menu-bar {
	padding: 0;
}

.footer__menu-bar--login {
	margin: 20px 0 10px;
}

.footer__menu-bar--register {
	margin: 30px 0 10px;
}

.footer__menu {
	display: inline;
}

.footer__menu--login {
	margin: 0 5px;
}

.footer__menu--register {
	font-size: 13px;
	margin: 0 6px;
}

.footer__link {
	text-decoration: none;
}

.footer__link:hover {
	color: red;
	text-decoration: underline;
}

/*
 * color:	override userAgent
 * */
.footer__link--login,
.footer__link--register {
	color: gray;
}

.footer__copyright {
	margin: 10px 0 40px;
}

/*
 * Block:	mask
 * */

/*
 * z-index:		WeUI Compatible <https://weui.io>
 * */
.mask {
	background: #000;
	bottom: 0;
	filter: alpha(opacity=15);
	left: 0;
	opacity: 0.15;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1000;
}

.mask--hidden {
	display: none;
}
